<template>
  <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
    @on-close="onClose" @on-confirm="onConfirm">
    <template v-slot:content>
      <div class="channel-form">
        <el-form ref="ruleFormRef" :model="channelForm" :rules="rules" label-width="120px" class="demo-ruleForm"
          status-icon>
          <el-form-item label="白名单值" prop="value">
            <el-input v-model="channelForm.value" placeholder="请输入白名单值" />
          </el-form-item>
          <el-form-item label="白名单类型" prop="type">
            <el-select v-model="channelForm.type" placeholder="请选择白名单类型">

              <el-option v-for="(item, index) in blackAndWhiteType" :key="item" :label="item" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="原因">
            <el-input v-model="channelForm.reason" placeholder="请输入原因" clearable />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search, Minus, Plus } from "@element-plus/icons-vue";
import { useEnumStore } from "@/store/enumeration";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { whiteAddPost } from "@/api/blackAndWhite";
import useInstance from "@/hooks/useInstance";
const { blackAndWhiteType } = storeToRefs(useEnumStore())
defineOptions({
  name: "addListWhite",
});

const emit = defineEmits(["refresh", 'searchEdit']);
const { global } = useInstance();
const dialogBasic = ref({
  title: "新建白名单",
  visible: false,
  width: 600,
  height: 550,
  showFooter: true,
  marginTop: "10vh",
});

const ruleFormRef = ref<FormInstance>();

const channelForm = reactive<any>({
  type: null, //  枚举
  value: null, //  白名单值
  reason: null, //进入白名单原因
});
const rules = reactive<FormRules>({
  type: [
    {
      required: true,
      trigger: "blur",
      message: "请选择白名单类型",
    },
  ],
  value: [
    {
      required: true,
      trigger: "blur",
      message: "请输入白名单值",
    },
  ],
  reason: [
    {
      required: true,
      trigger: "blur",
      message: "请输入白名单原因",
    },
  ],
});
//显示弹框
const show = (type: string, row?: any) => {
  dialogBasic.value.visible = true;
  if (type === "add") {
    dialogBasic.value.title = "新增白名单";
    dialogBasic.value.height = 500;
    global.$resetForm(ruleFormRef.value, channelForm);

    resetForm();
  } else {
    dialogBasic.value.height = 550;
    global.$resetForm(ruleFormRef.value, channelForm);
    dialogBasic.value.title = "编辑白名单";

    global.$objCopy(channelForm, row);
  }
};
const onClose = () => {
  dialogBasic.value.visible = false;
  resetForm();
};
const onConfirm = async () => {
  await ruleFormRef.value?.validate(async (isOk) => {
    if (isOk) {
      const res = await whiteAddPost({ ...channelForm });
      if (res.code == 20000) {
        ElMessage({
          type: "success",
          message: channelForm.id ? "白名单编辑成功" : "白名单新增成功",
        });
      }
      if (channelForm.id) {
        emit('searchEdit')
      } else {

        emit("refresh");
      }
      onClose();
    } else {
      ElMessage({
        type: "error",
        message: channelForm.id
          ? "白名单编辑失败 请重试！"
          : "白名单新增失败 请重试！",
      });
    }
  });
};

const resetForm = () => {
  ruleFormRef.value?.resetFields();
};

defineExpose({
  show,
});
</script>

<style></style>
